<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getPage } from '@/api/post';
import { useUserStore } from '@/stores';
const userStore = useUserStore()
const username = ref('')

const page_size = ref(5)
const page_number = ref(1)
const total = ref(0)
const posts = ref()
const description = ref('')
const postEditRef = ref()

const get_posts = async () => {
    const { data } = await getPage(page_number.value, page_size.value, username.value)
    posts.value = data.data
    total.value = data.total
}

onMounted(async () => { // 在组件挂载后获取数据
    username.value = userStore.user.username
    await get_posts()
    description.value = "还没有" + username.value + "发布的Post..."
})
const currentChange = async (val: number) => {
    const { data } = await getPage(val, page_size.value, username.value)
    posts.value = data.data
}
const handleEdit = async (val: any) => {
    postEditRef.value.open(val)
}
const handleDel = async () => {
    await get_posts()
}
const handleUpdate = async () => {
    await get_posts()
}

</script>

<template>
    <el-empty v-if="total === 0" :description="description" />
    <!-- <PostBlock v-else v-for="item in posts" :key="item.id" :title="item.title" :content="item.content" :user-view="true"
        :username="item.username" :time="item.time" /> -->
    <PostBlock v-else v-for="item in posts" :key="item.id" :post="item" :userView="true" @edit="handleEdit"
        @delete="handleDel" />
    <PostEdit ref="postEditRef" @update="handleUpdate" />

    <el-pagination background layout="prev, pager, next, jumper" @current-change="currentChange" :page-size="page_size"
        :total="total" />
</template>
<style lang=scss>
.el-pagination {
    margin-top: 20px;
    margin-left: 10px;
    justify-content: flex-start;
}
</style>